<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item >数据分析</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button :icon="Expand" color="#626aef" style="color: white" round @click="pageList">
      机关列表
    </el-button>

    <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>
  <div style="width:80%;text-align:center;margin-left: 10%;margin-top: 50px">
    <div style="width: 33%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <div class="page_provider_title">搜索报告</div>
          <el-config-provider :locale="zhCn">
            <el-date-picker v-model="Year" type="year" placeholder="请选择年份"></el-date-picker>
          </el-config-provider>
          <el-button :icon="Search" color="#626aef" style="color: white" round  @click="onDefault(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="myChart1" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart2" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart3" :style="{width: '33%', height: '550px', float: 'left'}"></div>
    <div id="myChart4" :style="{width: '100%', height: '550px', float: 'left','margin-top':'100px'}"></div>
    <div id="myChart5" :style="{width: '100%', height: '550px', float: 'left','margin-top':'100px'}"></div>
  </div>

</template>

<script setup>
import {defineComponent, onMounted, ref, watch} from 'vue';
import * as echarts from 'echarts'
import Header from './common/Header.vue';
import Drawer from './common/Drawer.vue';
import http, {baseUrl} from "../utils/http";
import zhCn from'element-plus/lib/locale/lang/zh-cn'
import {ElMessage} from "element-plus";
import  * as api from "../api/loginHttp.js";
import {useRoute, useRouter} from "vue-router"
const router = useRouter()
const route = useRoute()
const myChart = ref()
const myChart1 = ref()
const myChart2 = ref()
const groupId = ref()
const id = ref()
const reportId = ref()
const labName = ref()
const Year = ref()
const YearNew = ref()
const birth = ref([]);
onMounted(() => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId
    YearNew.value = $getNewYear()
    if (groupId.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if (groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    }
  }

  onDefault()
})

const onHome = async () => {
  await router.push({'path': '/Home'})
}

const onDefault = async (type = 0) => {
  let params = {
    'group_id': groupId.value,
  }
  // if(Year.value == undefined) {
  //   ElMessage.error('请输入年份再查询数据')
  //   return false;
  // }

   if(type !== 0) {
     YearNew.value = $getYear(Year.value)
     params.year = YearNew.value
   }

  const res = await api.geCompanytChart(params);
  //这里，key拿到了，但是不对
  let one = res.data.data.one;
  let arrOne = [];
  let arrDataOne = [];
  for(let k in one){
    arrOne.push(k+'月')
    arrDataOne.push(one[k])
  }
  //
  // arrData.push(one['01'])
  // arrData.push(one['02'])
  // arrData.push(one['03'])
  // arrData.push(one['04'])
  // arrData.push(one['05'])
  // arrData.push(one['06'])
  // arrData.push(one['07'])
  // arrData.push(one['08'])
  // arrData.push(one['09'])
  // arrData.push(one['10'])
  // arrData.push(one['11'])
  // arrData.push(one['12'])
  //
  //
  //
  // const dataAxisOneData = ref(['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']);
  const dataAxisOneData = ref(arrOne);
  const dataOne = ref(arrDataOne);
  let myChart = echarts.init(document.getElementById("myChart1"));
  myChart.value = myChart;
  myChart.setOption({
    title: {
      text: '按月统计报告总数（'+ YearNew.value +'年）',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: dataAxisOneData.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '报告总数',
        type: 'bar',
        barWidth: '60%',
        data: dataOne.value
      }
    ]
  });

  let two = res.data.data.two;
  let arrTwo = [];
  let arrDataTwo = [];
  for(let k in two){
    arrTwo.push(k+'岁')
    arrDataTwo.push(two[k])
  }
  const dataAxisTwoData = ref(arrTwo);
  const dataTwo = ref(arrDataTwo);
  let myChart2 = echarts.init(document.getElementById("myChart2"));
  myChart2.value = myChart2;
  myChart2.setOption({
    title: {
      text: '按年龄统计报告（'+ YearNew.value +'年）',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: dataAxisTwoData.value,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: dataTwo.value
      }
    ]
  });

}

const pageList = async () => {
  await router.push({'path': '/CompanyList/' + groupId.value})
}
function $getYear(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y;
  return time;
}
function $getNewYear() {
  let date = new Date();
  let y = date.getFullYear();
  return y;
}
</script>

<style scoped>

</style>
